import React from 'react'
import { Row, Col } from 'antd'
import CountUp from 'react-countup'
import Icon from '@/components/Icon'
import './index.scss'

const chartList = [
  {
    type: '访客',
    icon: 'UserOutlined',
    num: 102400,
    color: '#40c9c6',
  },
  {
    type: '待办',
    icon: 'MessageOutlined',
    num: 81212,
    color: '#36a3f7',
  },
  {
    type: '利润',
    icon: 'DollarCircleOutlined',
    num: 9280,
    color: '#f4516c',
  },
  {
    type: '成本',
    icon: 'ShoppingCartOutlined',
    num: 13600,
    color: '#f6ab40',
  },
]

const PanelGroup = (props) => {
  const { handlerChartData } = props

  return (
    <div className="app-panel-group">
      <Row gutter={40} className="panel-group">
        {chartList.map((chart, i) => (
          <Col
            key={i}
            lg={6}
            onClick={handlerChartData.bind(this, chart.type)}
            className="card-panel-col"
          >
            <div className="card-panel">
              <div className="card-panel-icon">
                <Icon 
                  type={chart.icon} 
                  className={chart.type}
                  style={{ fontSize: 55, color: chart.color }}
                />
              </div>
              <div className="card-panel-description">
                <p className="card-panel-text">{chart.type}</p>
                <CountUp end={chart.num} start={0} className="card-panel-num" />
              </div>
            </div>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default PanelGroup
